<template>
  <view
    class="uni-table-th"
    :class="{ 'table--border': border }"
    :style="{ width: width + 'px', 'text-align': align }"
  >
    <slot></slot>
  </view>
</template>

<script>
/**
 * Th 表头
 * @description 表格内的表头单元格组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=
 * @property {Number} 	width 						单元格宽度
 * @property {Number} 	align = [left|center|right]	单元格对齐方式
 * @value left   	单元格文字左侧对齐
 * @value center	单元格文字居中
 * @value right		单元格文字右侧对齐
 */

export default {
  name: 'uniTh',
  options: {
    virtualHost: true,
  },
  props: {
    width: {
      type: [String, Number],
      default: '',
    },
    align: {
      type: String,
      default: 'left',
    },
  },
  data() {
    return {
      border: false,
    }
  },
  created() {
    this.root = this.getTable('uniTable')
    this.rootTr = this.getTable('uniTr')
    this.rootTr.minWidthUpdate(this.width ? this.width : 140)
    this.border = this.root.border
  },
  methods: {
    /**
     * 获取父元素实例
     */
    getTable(name) {
      let parent = this.$parent
      let parentName = parent.$options.name
      while (parentName !== name) {
        parent = parent.$parent
        if (!parent) return false
        parentName = parent.$options.name
      }
      return parent
    },
  },
}
</script>

<style lang="scss">
.uni-table-th {
  padding: 12px 10px;
  display: table-cell;
  // text-align: center;
  color: #333;
  font-weight: 500;
  border-bottom: 1px #ddd solid;
  font-size: 14px;
  // background-color: #efefef;
  box-sizing: border-box;
}
.table--border {
  border-right: 1px #ddd solid;
}
</style>
